<script lang="ts" setup>
import type { Ref } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted,ref } from 'vue';
import { myMessage } from '@/api/setup'
import { useUserStore } from '@/stores/user'
const useStore = useUserStore()

const router = useRouter()

// 导航栏返回事件
function onClickLeft() {
    router.back()
}

const today = new Date()

interface IMes {
    id:number
    img:string
    title:string
    message:string
}
const mes: Ref<IMes[]> = ref([])
onMounted(()=>{
    myMessage({tel:useStore.username||''}).then(res=>{
        // console.log(res)
        mes.value=res.data.data
    })
})

interface Iitem {
    message:string
    title:string
}
// li点击事件
function seeMes(item:Iitem){
    window.localStorage.setItem('message',item.message)
    window.localStorage.setItem('title',item.title)
    router.push('/setup/messagedetails')
}
</script>

<template>
    <van-nav-bar title="我的消息" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="boxset">
        <!-- 导航栏 -->

        <section>
            <ul>
                <li v-for="item in mes" :key="item.id" @click="seeMes(item)">
                    <van-image round width="0.6rem" height="0.6rem"
                        :src="item.img" />
                        <div class="bigbox">
                            <div>{{ item.title }} <p>{{ today.toLocaleDateString() }}</p></div>
                            <p>{{ item.message }}</p>
                        </div>
                </li>
            </ul>
        </section>
    </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #f7fdff;
}
.boxset {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

ul>li {
    height: 80px;
    width: 350px;
    background-color: white;
    border-radius: 20px;
    margin: 10px auto;
    display: flex;
    align-items: center;

    .van-image{
        margin-left: 10px;
        margin-right: 10px;
    }

    .bigbox{
        flex: 1;

        div{
            display: flex;
            align-items: center;
            position: relative;
            font-weight: 700;
            font-size: 16px;

            p{
                position: absolute;
                right: 10px;
                font-size: 12px;
                color: gray;
            }
        }

        p{
            color: gray;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
    }
}
</style>